<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Access-Control-Allow-Origin" content="*">
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
  <meta name="renderer" content="webkit">
  <style type="text/css">
    * { margin: 0px; padding: 0px; font-family:"微软雅黑";}
    table.table-bordereds{border-collapse:collapse; width:100%; background: #2e9ddd; margin: 0px auto 0px; color: #FFF; font-size: 14px;}
    table.table-bordereds tr {
      height: 45px;
      line-height: 45px;
    }
    table.table-bordereds tr.tab_two{ background: #42a8e1;}
    table.table-bordereds tr td{ border: 1px solid #6eb6e1}
    .tab_width1{ width: 14%; text-align: right; padding-right: 1%;}
    .tab_width2{ width: 34%; padding-left: 1%;}
    .tab_width3{ width: 14%; text-align: right; padding-right: 1%;}
    .tab_width4{ width: 34%; padding-left: 1%;}
    .tab_width5{ width: 84%; padding-left: 1%;}
  </style>
</head>
<body style="background: #d0e7f7;" >
<table class="table-bordereds" id="vue_det"  v-on:>
  <tr class="tab_two">
    <td class="table_header tab_width1">申请项目名称：</td>
    <td class="table_text tab_width5" colspan="3">{{projectName}}</td>
  </tr>
  <tr>
    <td class="table_header tab_width1" >申请人名称：</td>
    <td class="table_text tab_width2" >{{applyUserName}}</td>
    <td class="table_header tab_width3" >申请人类型：</td>
    <td class="table_text tab_width4">个人</td>
  </tr>
  <tr>
    <td class="table_header tab_width1">申请单位名称：</td>
    <td class="table_text tab_width2">{{applyUserName}}</td>
    <td class="table_header tab_width3">法定代表人：</td>
    <td class="table_text tab_width4">{{legalPersonName}}</td>
  </tr>
  <tr class="tab_two">
    <td  class="table_header tab_width1">证件类型:</td>
    <td class="table_text tab_width2">{{credentialType}}</td>
    <td class="table_header tab_width3">证件号:</td>
    <td class="table_text tab_width4">{{credentialNumber}}</td>
  </tr>
  <tr>
    <td class="table_header tab_width1">邮政编码：</td>
    <td class="table_text tab_width2"  >{{applyPostCode}}</td>
    <td class="table_header tab_width3">通讯地址：</td>
    <td class="table_text tab_width4"  >{{applyUserAddress}}</td>
  </tr>
  <tr class="tab_two">
    <td  class="table_header tab_width1">申请人手机：</td>
    <td class="table_text tab_width2" >{{applyUserPhone}}</td>
    <td class="table_header tab_width3">联系人/代理人:</td>
    <td class="table_text tab_width4">{{contactUserName}}</td>
  </tr>
  <tr >
    <td  class="table_header tab_width1">联系人/代理人证件号:</td>
    <td class="table_text tab_width2">{{contactCredentialNumber}}</td>
    <td class="table_header tab_width3">联系人/代理人手机号:</td>
    <td class="table_text tab_width4">{{contactUserPhone}}</td>
  </tr>
  <tr class="tab_two">
    <td class="table_header tab_width1 tab_two">备注：</td>
    <td class="table_text tab_width5" colspan="3">{{remark}}</td>
  </tr>
</table>
<script src="js/vue.min.js"></script>
<script type="text/javascript">
    var app = new Vue({
      el: '#vue_det',
      data: {
        projectName: "",
        applyUserName: "",
        legalPersonName: "",
        credentialType: "",
        credentialNumber: "",
        applyPostCode: "",
        applyUserAddress: "",
        applyUserPhone: "",
        contactUserName: "",
        contactCredentialNumber: "",
        contactUserPhone: "",
        remark: "",
      },
      mounted:function(){
       this.getCaseInfo();//需要触发的函数
      },
      methods: {
        getCaseInfo() {
          var content = this.getURLParameter( "jsonObject");
          var obj = JSON.parse(content);
          this.projectName = obj.projectName;
          this.applyUserName = obj.applyUserName;
          this.legalPersonName = obj.legalPersonName;
          this.credentialType = obj.credentialType;
          this.credentialNumber = obj.credentialNumber;
          this.applyPostCode = obj.applyPostCode;
          this.applyUserAddress = obj.applyUserAddress;
          this.applyUserPhone = obj.applyUserPhone;
          this.contactUserName = obj.contactUserName;
          this.contactCredentialNumber = obj.contactCredentialNumber;
          this.contactUserPhone = obj.contactUserPhone;
          this.remark = obj.remark;
        },
        getURLParameter(name) {
           return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null;
        },
      }
    })
</script>
</body>
</html>
